<script setup>
import {ref} from 'vue';
import {selectFieldsApi} from "/src/api/business/super-computer/datasource/select-fields-api.js";
import SelectFieldsForm from "/src/views/business/super-computer/select-fields/select-fields-form.vue";
import {selectTableApi} from "/src/api/business/super-computer/datasource/select-table-api.js";

let items = ref([]);
let columns = ref([]);
let loading = ref(false);
let tableName = ref(null);
//按钮方法-------------------------------------------------------------------------------------------------------------
const getTableName = async () => {
  tableName.value = selectedTableName.value;
  await selectTableApi.getSaveTableNames(tableName.value, sourceId.value);
  await fetchData();
}
const firstGetTableName = async () => {
  tableName.value = selectedTableName.value;
  await fetchData();
}

// 数据处理方法--------------------------------------------------------------------------------------------------------
const fetchData = async () => {

  loading.value = true; // 开始加载
  try {
    if (tableName.value != null) {
      let response = await selectFieldsApi.queryTable(tableName.value,sourceId.value);
      items.value = response.data;
    } else {
      let response = null
    }

    if (items.value.length > 0) {
      //key值为行
      columns.value = Object.keys(items.value[0]).map(key => ({
        title: key,
        dataIndex: key,
        key: key,
      }));
    }
  } catch (error) {
    console.error("There was an error fetching the data!", error);
  } finally {
    loading.value = false; // 结束加载
  }
};

// 获取表名表单操作----------------------------------------------------------------------------------------------------
let tableNameItems = ref([]);

async function tableNameFetchData(source) {
  sourceId.value = source;
  let response = await selectTableApi.getAllTableNames(sourceId.value);
  
  tableNameItems.value = [];
  tableNameItems.value = response.data;
  
  tableNameOptions.value = [];

  tableNameItems.value.forEach(item => {
    tableNameOptions.value.push({
      value: item,
      label: item
    })
  })
  
}

const tableNameOptions = ref([]);
const selectedTableName = ref();

const tableNameHandleChange = async value => {
  selectedTableName.value = value;
  await getTableName();
};

const tableNameHandleBlur = () => {
};
const tableNameHandleFocus = async () => {
};

const tableNameFilterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
let tableNameValue = ref(undefined);


// 字段表单操作--------------------------------------------------------------------------------------------------------

const formRef = ref();

function showForm() {
  formRef.value.showModalFields(sourceId.value, tableName.value);
}

// 在组件挂载后调用获取数据的方法----------------------------------------------------------------------------------------


// 处理对话框----------------------------------------------------------------------------------------
const sourceId = ref();
const open = ref(false);

async function showSelectFieldsModal(source) {

  await tableNameFetchData(source);
  
  const responseName = await selectTableApi.getNameBySourceId(source);
  
  
  
  if (responseName.data == null) {
    
    selectedTableName.value = tableNameItems.value[0];
    
  } else {
    selectedTableName.value = responseName.data;
    sourceId.value = source;
  }


  await firstGetTableName();

  
  open.value = true;
}

const emit = defineEmits(['on-exit']);
const handleOk = e => {
  // 执行一些退出操作
  emit('on-exit');
  open.value = false;
};

defineExpose({
  showSelectFieldsModal,
})


</script>


<!--================================================================================================================-->
<!--================================================================================================================-->

<template>
  <a-modal v-model:open="open" width="1000px" title="请选择表名：" @ok="handleOk">
    <a-space direction="vertical" style="width: 100%">
      <a-select
          v-model:value="tableNameValue"
          show-search
          :placeholder=selectedTableName
          style="width: 200px"
          maxTagCount=10000
          :options="tableNameOptions"
          :filter-option="tableNameFilterOption"
          @focus="tableNameHandleFocus"
          @blur="tableNameHandleBlur"
          @change="tableNameHandleChange"
      />
      <a-table
          :columns=columns
          :data-source="items"
          :loading="loading"
          :scroll="{ x: '220%', y: 350 }"
      />
      <a-button type="primary" @click="showForm(sourceId)" size="small">选择字段</a-button>
    </a-space>

    <SelectFieldsForm ref="formRef"/>

  </a-modal>


</template>

